// console.log($("input"))
// console.log($("input").eq(0).val())
var arr = [];
function foo(i) {
    arr.forEach((item, index) => {
        if (item == i) {
            arr.splice(index,1)
        }
    })
}
// 手机号
$("input").eq(0).blur(function () {
    $(this).attr({ "name": "false" })
        var str=$(this).val();
        var reg = new RegExp("^1[0-9]{10}", "g");
        if (str =="") {
            $("em").eq(1).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(1);
            return;
        }
        if (str.length != "11") {
            $("em").eq(1).css({ "display": "none" })
            $("em").eq(0).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(1);
            return;

        }
        if (str.search(reg) != 0) {
            $(this).after("<em>手机号输入有误</em>")
            $(this).css({ "border-color": "red" })
            foo(1);
            return;
        }
        $("em").eq(0).css({ "display": "none" })
    $(this).css({ "border-color": "blue" })
    if (arr.indexOf(1) == "-1") {
        arr.push(1);
    }
    
})
// 密码
$("input").eq(1).blur(function () {
    $(this).attr({ "name": "false" })
        var str=$(this).val();
        var reg = new RegExp("^[a-zA-Z0-9_]", "g");
        if (str =="") {
            $("em").eq(2).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(2);
            return;
        }
        if (str.length <6 || str.length>18) {
            $("em").eq(2).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(2);
            return;
        }
        if (str.search(reg) != 0) {
            $("em").eq(2).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(2);
            return;
        }
        $("em").eq(2).css({ "display": "none" })
        $(this).css({"border-color":"blue"})
        if (arr.indexOf(2) == "-1") {
            arr.push(2);
        }
    })
// 密码 第二次
$("input").eq(2).blur(function () {
    $(this).attr({ "name": "false" })
        var str=$(this).val();
        // var reg = new RegExp("^[a-zA-Z0-9_]", "g");
        if (str !=$("input").eq(1).val() ||str=="") {
            $("em").eq(3).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(3);
            return;
        }
        $("em").eq(3).css({ "display": "none" })
        $(this).css({"border-color":"blue"})
        if (arr.indexOf(3) == "-1") {
            arr.push(3);
        }
    })
// 协议
$("input").eq(3).click(function () {
    var str = $(this).prop("checked");
        if (str==false) {
            $("em").eq(5).css({ "display": "block" })
            $(this).css({ "border-color": "red" })
            foo(5);
            return;
        }
        $("em").eq(5).css({ "display": "none" })
    $(this).css({ "border-color": "blue" })
    arr.push(5);
})


// 注册按钮
let brr = [];
$("input").eq(4).click(function () {
    //模拟事件
    $('input').eq(0).trigger("blur");
    $('input').eq(1).trigger("blur");
    $('input').eq(2).trigger("blur");
    var str = $("input").eq(3).prop("checked");
    if (str==false) {
        $("em").eq(5).css({ "display": "block" })
    }
    $("em").eq(4).css({ "display": "none" })
    // 验证码
    if ($(".a1").css("width") != "272px") {
        $("em").eq(4).css({ "display": "block" })
        foo(4);
    }
    // 判断手机号 密码 验证码 协议 是否都复合要求 ////////////////////////////
    if (arr.length == "5") {
        // 请求数据
        let i = true;
    axios.get("http://localhost:3000/user")
        .then(function (data) {
            brr = [];
            data.data.forEach((item) => {
                brr.push(item.phone)
            })
            // console.log(brr);
            // console.log(brr.indexOf(parseInt($("input").eq(0).val())))
                if (brr.indexOf($("input").eq(0).val()) != -1) {
                    alert("用户名已存在");
                } else {
     // 增加数据
        axios.post("http://localhost:3000/user", {
            "phone": $("input").eq(0).val(), "password": $("input").eq(1).val()
        })
            .then(function (data) {
                alert("注册成功");
                setInterval(function () {
                    location.href = "http://localhost:8080/login.html";
                },1000)
            })
            
            .catch(function () {
                console.log("请求失败");
            })
                    
                }
                })
            .catch(function () {
                console.log("请求失败");
            })
      
     }

})
// 鼠标移入事件
$("input").mouseover(function () {
    var flag = $("input").eq(0).attr("name");
    if (flag == "true") {
        $(this).css({"border-color":"green"});
    }
    
})
$("input").mouseout(function () {
    var flag = $("input").eq(0).attr("name");
    if (flag == "true") {
        $(this).css({"border-color":"#666"});
    }
    
})
// ////////////////////
// 验证码模块
$(".a2").mousedown(function (e) {
    e.preventDefault();
    $(document).on("mousemove", function (e) {
        event.preventDefault();
        if ($(".a1").css("width") == "272px") {
            $("em").eq(4).css({ "display": "none" })
            if (arr.indexOf(4) == "-1") {
                arr.push(4)
            }
            return;
        }
        var wid = e.pageX - $(".a1").offset().left;
        if (wid >= 260) {
            $(".a1").css({"width":"272px"});
            return;
        }
        $(".a1").css({"width":wid});
            console.log(wid);
        })  
})
$(document).mouseup(function () {
    $(document).off("mousemove");
    if ($(".a1").css("width") != "272px") {
        $(".a1").animate({ width: "0px" }, 500)
    } else {
        $(".a2").css({"background-color":"#fff"})
        $(".a1").text("验证通过");
        $(".a2").html('<img src="img/sgin.png" alt=""></img>');
    }  
})
